<html>
    <head>
      <title>Bullet/WebGL Demo</title>
      <script src="CubicVR.min.js" type="text/javascript"></script>
      <style type="text/css">
        body {
          background-color: #ccc;
          text-size-adjust: none;
        }
      </style>

      <script type="text/javascript">
        // Main demo code

        var boxes = [];

        var lastFPS = 0;
        var outElement = null;
        var currFPS = 0, allFPS = 0;
        function showFPS() {
          if (!outElement) outElement = document.getElementById('out');
          var now = Date.now();
          if (now - lastFPS > 333) {
            outElement.value = currFPS + ' / ' + allFPS;
            lastFPS = now;
          }
        }

        var FLOOR_SIZE = 100;
        var FLOOR_HEIGHT = -56

        var physicsWorker = null;
        var nextPhysicsWorker = new Worker('worker.js');

        // CubicVR code

        function startUp(NUM) {
          var NUMRANGE = [];
          while (NUMRANGE.length < NUM) NUMRANGE.push(NUMRANGE.length+1);

          document.getElementById('postdiv').innerHTML = '(' + NUM + ' cubes)';

          //document.getElementById('before').style.visibility = 'hidden';
          document.getElementById('during').style.visibility = 'visible';

          var canvas = document.getElementById("canvas");
          canvas.width = screen.width*0.75;
          canvas.height = screen.height*0.50;

          var gl = CubicVR.init(canvas);

          if (!gl) {
            alert("Sorry, no WebGL support :(");
            return;
          };

          var quaternion = new CubicVR.Quaternion;

          var scene = new CubicVR.Scene(canvas.width, canvas.height, 70);

          var light = new CubicVR.Light({
            type:CubicVR.enums.light.type.POINT,
            intensity: 0.9,
            areaCeiling: 80,
            areaFloor: FLOOR_HEIGHT,
            areaAxis: [15, 10],
            distance: 60,
            mapRes: 1024
          });
          scene.bindLight(light);

          scene.camera.position = [0, 2.4, 17];
          scene.camera.target = [0, 2.4, 0];

          var boxMaterials = [];
          var boxMeshes = [];

          for (var i = 0; i < 5; i++) {
            boxMaterials[i] = new CubicVR.Material({
              textures: {
                color: new CubicVR.Texture("cube" + (i+1) + ".jpg")
              }
            });
            boxMeshes[i] = new CubicVR.primitives.box({
              size: 2.0,
              material: boxMaterials[i],
              uvmapper: {
                projectionMode: CubicVR.enums.uv.projection.CUBIC,
                scale: [2, 2, 2]
              }
            }).calcNormals().triangulateQuads().compile().clean();
          }

          for (var i = 0; i < NUM; i++) {
            boxes[i] = new CubicVR.SceneObject({ mesh: boxMeshes[Math.floor(Math.random()*5)], position: [0, -10000, 0] });
            scene.bindSceneObject(boxes[i], true);
          }

          var floorMaterial = new CubicVR.Material({
            textures: {
              color: new CubicVR.Texture("cube3.jpg")
            }
          });
          var floorMesh = new  CubicVR.primitives.box({
            size: FLOOR_SIZE,
            material: floorMaterial,
            uvmapper: {
                projectionMode: CubicVR.enums.uv.projection.CUBIC,
                scale: [4, 4, 4]
            }
          }).calcNormals().triangulateQuads().compile().clean();

          var floor_ = new CubicVR.SceneObject({ mesh: floorMesh, position: [0, FLOOR_HEIGHT, 0] });
          scene.bindSceneObject(floor_, true);

          // Worker

          if (physicsWorker) physicsWorker.terminate();
          physicsWorker = nextPhysicsWorker;
          nextPhysicsWorker = null;
          if (!physicsWorker) physicsWorker = new Worker('worker.js');

          physicsWorker.onmessage = function(event) {
            var data = event.data;
            if (data.objects.length != NUM) return;
            for (var i = 0; i < NUM; i++) {
              var physicsObject = data.objects[i];
              var renderObject = boxes[i];
              renderObject.position[0] = physicsObject[0];
              renderObject.position[1] = physicsObject[1];
              renderObject.position[2] = physicsObject[2];
              quaternion.x = physicsObject[3];
              quaternion.y = physicsObject[4];
              quaternion.z = physicsObject[5];
              quaternion.w = physicsObject[6];
              renderObject.rotation = quaternion.toEuler();
            }
            currFPS = data.currFPS;
            allFPS = data.allFPS;
          };
          physicsWorker.postMessage(NUM);

          // Main loop

          var mvc = new CubicVR.MouseViewController(canvas, scene.camera);

          CubicVR.MainLoop(function(timer, gl) {
            var dt = timer.getLastUpdateSeconds();
            scene.render();
            showFPS();
          });
        }
      </script>
    </head>
    <body onload="document.getElementById('during').style.visibility = 'hidden'">
      <center>
        <h2>ammo.js benchmark</h2>

        <canvas id="canvas" width="1" height="1"></canvas>
        <br>
        <br>
        <div id="before">
          <form>
            Boxes:
            <select name="boxes">
              <option value="10">10</option>
              <option value="50">50</option>
              <option value="100">100</option>
              <option value="200">200</option>
              <option value="300">300</option>
              <option value="500" selected>500</option>
              <option value="750">750</option>
              <option value="1000">1000</option>
              <option value="1500">1500</option>
              <option value="2500">2500</option>
            </select>
            <input type="button" value="go!" onclick="startUp(boxes.value);">
            <a href="https://twitter.com/horse_js"><img src="js.png" style="width: 4em; margin-left: 300px"></a>
          </form>
        </div>
        <div id="during"><div>Physics FPS (current / stable): <input type="text" id="out" readonly="1" size="7"></div><div id="postdiv"></div></div>
        <p>
        This is <b><a href="https://github.com/kripken/ammo.js">ammo.js</a></b>, a port of
        the <b><a href="http://www.bulletphysics.com">Bullet physics engine</a></b> from C++ to JavaScript
        using <b><a href="http://emscripten.org">Emscripten</a></b> in
        <b><a href="http://asmjs.org">asm.js</a></b> mode. WebGL rendering in this demo is done using
        <b><a href="https://github.com/cjcliffe/CubicVR.js/">CubicVR.js</a></b>.
        </p>
      </center>
    </body>
</html>
